<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <div class="content page-title">
      <h2>物流数据看板</h2>
    </div>
    <div class="content search-content">
      <search-com type="logistics" @outputSearchData="receiveSearchData"
                  @searchBasic="getStatistics($event)"></search-com>
    </div>
    <div class="content" v-loading="baseData.loading">
      <!--      <h3 class="card-title">基础数据</h3>-->
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseData.list">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index" :key="index"></basic-data>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import Distribution from './components/Distribution.vue'
import Comparison from './components/Comparison.vue'
import TopSale from './components/TopSale.vue'
import dataBoardCommon from './mixins/dataBoardCommon'
import { getDateRange } from '@/utils/index.js'
export default {
  mixins: [dataBoardCommon],
  components: {
    navbar,
    SearchCom,
    SearchComCompany,
    BasicData,
    TotalSales,
    Distribution,
    DataBoardTable,
    Comparison,
    TopSale
  },
  data () {
    return {
      loading: false,
      basicDays: 1, // 基础数据默认天数
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },
      baseData: {
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        list: [
          { title: '总出库数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '75.00' },
          { title: '销售出库数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -5.01 },
          { title: '内部出库数', dateArr: ['2022-06-02', '2022-06-02'], totalNumber: '888.88', increase: '55.00' },
          { title: '物流单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -15 }
        ]
      },
      screenWidth: document.body.clientWidth
    }
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
    })
  },
  created () {
    this.getStatistics(true)
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {
    /* 监听*/
    screenWidth (val) {
      this.screenWidth = val
      console.log('this.screenWidth', this.screenWidth)
      this.windowOnresize()
    }
  },
  methods: {
    // 物流销售数据统计
    getStatistics (isDefault, dateArr, orgCodeArrStr) {
      this.baseData.loading = true
      // days 1 今天
      // days 1001 昨天
      // days 1070 过去七天
      // days 1071 本周
      // days 1031 本月
      // days 10000 自定义时段
      // debugger
      const days = this.basicDays
      if (isDefault || days === 1 || days === 1001) { // 默认 今天 昨天
        this.baseData.dateArr = this.defaultDateTime(days)
      } else if (days === 1071) { // 本周
        const dateRange = getDateRange('week')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本周，日期范围', this.baseData.dateArr)
      } else if (days === 1031) { // 本月
        const dateRange = getDateRange('month')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本月，日期范围', this.baseData.dateArr)
      } else { // 选择
        console.log(this.baseData.dateArr)
        if (this.baseData.dateArr[0].indexOf('undefined') > -1) {
          if (days === 10000) {
            this.baseData.loading = false
            return this.$message.warning('请选择日期！')
          }
          this.baseData.dateArr = this.defaultDateTime(days)
        }
      }
      // debugger
      const tempOrgCode = this.baseData.orgCode
      if (tempOrgCode == 'undefined' || !tempOrgCode || !/[^\s]/.test(tempOrgCode)) {
        // 为空
        this.baseData.orgCode = this.userInfo.orgCode
      } else {
        // 不为空
        console.log('有选择公司')
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.baseData.dateArr[0],
        endTime: this.baseData.dateArr[1],
        orgCode: this.baseData.orgCode
      }
      this.$api.dataLogisticsReport(params).then((res) => {
        this.baseData.loading = false
        if (res.code == 0) {
          const resData = res.data
          resData.forEach(item => {
            item.title = item.kanbanName
            // item.totalNumber = this.formatNumber(item.totalNumber, 2)
            // item.totalNumber = item.prevTotalNumber
            // console.log(Number(item.increase))
            if (item.kanbanName.indexOf('总出库数') > -1 || item.kanbanName.indexOf('销售出库数') > -1 || item.kanbanName.indexOf('内部出库数') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">件</span>`
              // item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label>`
              if (item.kanbanName.indexOf('总出库数') > -1) {
                item.tip = `销售出库数 + 内部出库数`
              }
              if (item.kanbanName.indexOf('销售出库数') > -1) {
                item.tip = `客服下单商品数量（已发货）`
              }
              if (item.kanbanName.indexOf('内部出库数') > -1) {
                item.tip = `内部出库商品数量（已发货）`
              }
            }
            if (item.kanbanName.indexOf('物流单数') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">单</span>`
              // item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label>`
              item.tip = `物流单数量`
            }
            item.increaseNum = isNaN(Number(item.increase)) ? 0 : Number(item.increase)
            item.increase = this.formatNumber(item.increase, 0)
          })
          this.baseData.list = resData
        }
      }).catch((err) => {
        console.log(err)
        this.baseData.loading = false
      })
    },
    setElTable () { // 设置表格宽高
      const sWidth = this.screenWidth
      // console.log( sWidth )
      this.elTable.height = parseInt(sWidth / 3)
      /*
      if(sWidth > 1900){
        this.elTable.height = 800
      } else if (sWidth > 1600) {
        this.elTable.height = 800
      } else if (sWidth > 1200) {
        this.elTable.height = 600
      } else if (sWidth > 600) {
        this.elTable.height = 400
      }
      */
      // this.elTable.height = getScreenWidth
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

///deep/ .el-table th > .cell { text-align: unset; }
template {
  display: block;
}

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}

.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  //background-color: #ecf5ff;
}

/deep/ .el-table__body-wrapper .el-table__row .el-table__cell:first-child .cell {
  color: #4168E7;
}


.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  //position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
